import React from 'react'
// import {
//     DesktopOutlined,
//     FileOutlined,
//     PieChartOutlined,
//     TeamOutlined,
//     UserOutlined,
// } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import { NavLink } from 'react-router-dom';
import { homeRouter } from '../router';
const MenuLeft =()=> {
    // const { Header, Content, Footer, Sider } = Layout;

    type MenuItem = Required<MenuProps>['items'][number];
    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
        type?: 'group',
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
            type,
        } as MenuItem;
    }
  
    const render =(arr:Router1) => {
        var items:any = []
        arr&&arr.map((item,index)=>{
           items.push(
             getItem(<NavLink to={item.path}>{item.title}</NavLink>,index,<img src={item.icon} alt="" />)
           )
        })
        return items
    }  

    return(
        
        <Menu 
        style={{width:'100%', height:'100%'}}
        defaultOpenKeys={['0']}
        mode='inline'
        items={render(homeRouter)}
        >  
        </Menu>
    )
}

export default MenuLeft